<style scoped>
    .detailsDiv {
        height: 100vh;
        width: 100vw;
        background-color: #F5F5F5;
    }

    .messageList {
        padding-bottom: 60px;
        background-color: #F5F5F5;
        padding-top: 50px;
    }
</style>

<template>
    <div class="detailsDiv">
        <van-nav-bar
                title="群聊"
                @click-right="a"
                style="width: 100vw;position: fixed;"
        >
            <van-icon name="edit" slot="right"/>
        </van-nav-bar>

        <div class="messageList" id="messageList">
            <van-pull-refresh v-model="isLoading" @refresh="onRefreshMessage">
                <van-row v-for="item in messageList" style="margin-top: 10px;">
                    <van-col span="4">
                        <img :src="item.headImgUrl" style="height: 80%;width: 80%;margin-left: 10%;border-radius: 80%"/>
                    </van-col>
                    <van-col span="19">
                        <p>{{item.userId}}</p>
                        <van-field
                                v-model="item.message"
                                type="textarea"
                                placeholder=""
                                rows="1"
                                autosize
                                readonly
                                style="border: 1px solid #FFF;border-radius: 10px;font-size: 14px;"
                        />
                        <!-- <p style="border: 1px solid red;font-size: 16px;"></p>-->
                    </van-col>
                </van-row>
            </van-pull-refresh>
        </div>

        <van-tabbar v-model="active" style="height: auto;">
            <van-cell-group style="width: 100%">
                <van-field v-model="messageValue" type="textarea" rows="1" autosize>
                    <van-button slot="button" size="small" type="primary" @click="sendMessage"
                                :disabled="disabledButton">发送
                    </van-button>
                </van-field>
            </van-cell-group>
        </van-tabbar>


    </div>
</template>

<script>
    export default {
        name: "Details",
        data() {
            return {
                websock: null,
                isLoading: false,
                loadingList: false,
                finishedList: false,
                disabledButton: true,
                active: 0,
                messageValue: '',
                messageList: []
            }
        },
        methods: {
            a() {

            },
            sendMessage() {
                let self = this;
                self.websocketsend(self.messageValue);
                self.messageValue = '';
                self.disabledButton = false;
            },
            initWebSocket() { //初始化weosocket
                //ws地址
                let self = this;
                let userinfo = self.common.getStorageS("userinfo");
                const wsuri = "ws://118.31.32.184:8080/websocket/groupChat/" + self.$route.params.roomId + "/" + userinfo.userId;
                //  const wsuri = "ws://192.168.1.10:82/websocket/groupChat/" + self.$route.params.roomId + "/" + userinfo.userId;
                self.websock = new WebSocket(wsuri);
                self.websock.onmessage = self.websocketonmessage;
            },
            websocketonmessage(e) { //数据接收
                let self = this;
                self.messageList.push(JSON.parse(e.data));
            },
            websocketsend(agentData) {//数据发送
                let self = this;
                self.websock.send(agentData);
            },
            websocketclose(e) {  //关闭
                let self = this;
                self.websock.close();
                console.log("connection closed (" + e.code + ")");
            },
            onRefreshMessage() {
                console("onRefreshMessage");
            },
            onLoadList() {
                let self = this;
                self.loadingList = false;
                self.finishedList = true;
            },
            scrollToBottom: function () {
                let self = this;
                self.$nextTick(() => {
                    var div = document.getElementById('messageList');
                    div.scrollTop = div.scrollHeight;
                })
            },

        },
        mounted() {
            this.initWebSocket();
        },
        watch: {
            'messageList': 'scrollToBottom',
            'messageValue': function () {
                let self = this;
                if (self.messageValue.length > 0) {
                    self.disabledButton = false;
                } else {
                    self.disabledButton = true;
                }
            },
        },
        destroyed() {
            this.websocketclose()
        },
    }
</script>

